<template>
	<view class="page">

		<view class="user-info" v-if="user_id!=''">
			<view class="avatar-container">
				<image class="avatar" :src="userInfo.avatar" />
				<view class="vip-badge">
					<uni-icons type="edit" size="16" color="#FF6B23" />
				</view>
			</view>
			<view class="user-detail">
				<view class="flex-row">
					<text class="user-id">{{ userInfo.name }}</text>
					<!-- <view class="verify-tip cursor-pointer">
						<uni-icons type="info" size="14" color="#FF6B23" />
						<text>身份信息待完善</text>
						<uni-icons type="right" size="14" color="#FF6B23" />
					</view> -->
				</view>
				<text class="welcome-text">尊敬的会员，欢迎你~</text>
			</view>
		</view>
		<view class="user-info" v-else @click="toLog">
			<view class="avatar-container">
				<image class="avatar" src="/static/head.jpg" />
				<view class="vip-badge">
					<uni-icons type="edit" size="16" color="#FF6B23" />
				</view>
			</view>
			<view class="user-detail">
				<view class="flex-row">
					<text class="user-id">登录/注册</text>
				</view>
			</view>
		</view>

		<!-- <view class="stats-bar">
			<view class="stat-item">
				<text class="stat-num">0</text>
				<text class="stat-label">优惠券</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">0</text>
				<text class="stat-label">积分</text>
			</view>
			<view class="stat-item">
				<text class="stat-num">0</text>
				<text class="stat-label">储值</text>
			</view>
		</view> -->


		<view class="function-section">
			<view class="section-title">常用功能</view>
			<view class="function-list">
				<view class="function-item flex-row justify-between cursor-pointer" @click="toDeposit">
					<view class="flex-row items-center">
						<uni-icons type="phone" size="20" />
						<text style="margin-left: 10rpx;">押金列表</text>
					</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view>
				<view class="function-item flex-row justify-between cursor-pointer" @click="toPhone">
					<view class="flex-row items-center">
						<uni-icons type="phone" size="20" />
						<text style="margin-left: 10rpx;">电话客服</text>
					</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view>
				<!-- <view class="function-item flex-row justify-between cursor-pointer">
					<view class="flex-row">
						<uni-icons type="chat" size="20" />
						<text style="margin-left: 10rpx;">我的评价</text>
					</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view> -->
				<!-- <view class="function-item flex-row justify-between cursor-pointer">
					<view class="flex-row items-center">
						<uni-icons type="person" size="20" />
						<text style="margin-left: 10rpx;">常用入住人</text>
					</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view> -->
				<view class="function-item flex-row justify-between cursor-pointer" @click="toOut" v-if="user_id!=''">
					<view class="flex-row items-center">
						<uni-icons type="settings" size="20" />
						<text style="margin-left: 10rpx;">退出登录</text>
					</view>
					<uni-icons type="right" size="16" color="#999999" />
				</view>
			</view>
		</view>

		<my-taber :count="2"></my-taber>
	</view>
</template>

<script setup>
	import myTaber from "@/components/myTaber.vue"
	// 组件逻辑
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	import { getToken, removeToken, setToken } from '@/utils/token.js'
	import { oaLogin, userInfoApi } from "@/utils/apiPost.js"
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		key: '3a26f7397fc12384590ae0a8ab25443b'
	});
	const {
		proxy
	} = getCurrentInstance()
	let user_id = ref('')
	let nickname = ref('')
	let member_sn = ref('')
	let avatar_path = ref('')
	let content = ref({})
	let role = ref('')
	let statusNum = ref({})
	let show = ref(false)
	let region_code = ref('')
	let list = reactive([null, null, null, null, null])
	onLoad((option)=>{
		if(option.type == 1){
			toLog()
		}
		
		console.log('user_id================',uni.getStorageSync('user_id'))
		console.log('userInfo================',uni.getStorageSync('userInfo'))
		if(uni.getStorageSync('user_id')){
			user_id.value = uni.getStorageSync('user_id')
		}
		if(uni.getStorageSync('userInfo')){
			userInfo.value = uni.getStorageSync('userInfo')
		}
		
		// getUserInfo()
	})
	onShow(() => {
		// uni.hideTabBar()
		// getLocat()
		// if(getToken() == undefined || getToken() == null || getToken() == ""){
			// getDate()
			let code = getQueryVariable('code')
			if (code) {
				oaLogin({code}).then(res=>{
					console.log(res)
					if(res.code == 1){
						setToken(res.data.token)
						uni.setStorageSync('userInfo', res.data)
						uni.setStorageSync('user_id', res.data.id)
						userInfo.value = res.data
						user_id.value = res.data.id
					}
				}).catch(error=>{
					console.log(error)
				})
			}
			
		// }
	})
	const getUserInfo = () => {
		userInfoApi().then(res=>{
			console.log(res)
		}).catch(error=>{
			console.log(error)
		})
	}
	const toPhone = () => {
		uni.makePhoneCall({
			phoneNumber: '13322222222' //仅为示例
		});
	}
	const getLocat = () => {
		uni.getLocation({
			type: 'gcj02',
			success(res) {
				console.log(res);
				let locat = [res.longitude, res.latitude]
				let location = locat.join(',')
				myAmapFun.getRegeo({
					location: location,
					success: function(data1) {
						console.log(data1, "回调成功")
						region_code.value = data1[0].regeocodeData.addressComponent.adcode
					},
					fail: function(info) {
						console.log(info, "回调失败")
					}
				})
			},
			fail(res) {
				console.log(res, "err");
			}
		})
	}
	const getDate = () => {
		// proxy.$req.requestPOST(proxy.$api.userInfo.getDetail, {
		// 	user_id: uni.getStorageSync('user_id'),
		// }).then(res => {
		// 	if (res.code == 1) {
		// 		content.value = res.data
		// 	}
		// })
		// proxy.$req.requestPOST(proxy.$api.CenterInfo.orderStat).then(res => {
		// 	if (res.code == 1) {
		// 		statusNum.value = res.data
		// 	}
		// })
	}
	const getDate1 = () => {
		proxy.$req.requestPOST(proxy.$api.WorkerCenterInfo.noRead).then(res => {
			if (res.code == 1) {
				read.value = res.data.count
			}
		})
	}
	const toScan = () => {
		uni.scanCode({
			success: function(res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				var vars = res.result.split("&");
				let obj = {
					userId: '',
					orderId: '',
					basicId: '',
				}
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					obj[pair[0]] = pair[1]
				}
				uni.navigateTo({
					url: '/pages/scanCode/scanCode?id=' + obj.userId
				})
				// console.log(obj,"obj");
				// if(obj.basicId==1){
				// 	proxy.$req.requestPOST(proxy.$api.userInfo.writeOff,{
				// 		user_id:uni.getStorageSync('user_id'),
				// 		id:obj.orderId
				// 	}).then(res1 => {
				// 		uni.showToast({
				// 			title:res1.msg=='操作成功'?'核销成功':res1.msg,
				// 			icon:'none'
				// 		})
				// 	})
				// }else if(obj.basicId==2){
				// 	uni.navigateTo({
				// 		url: '/pages/scanCode/scanCode?id=' + obj.userId
				// 	})
				// }

			}
		});
	}
	const toAbout = () => {
		uni.navigateTo({
			url: '/pages/aboutUs/aboutUs'
		})
	}
	const toYinsi = (num) => {
		uni.navigateTo({
			url: '/pages/yonghuxieyi/yonghuxieyi?type=' + num
		})
	}
	const toAddress = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/address/address'
		})
	}
	const toOrder = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.switchTab({
			url: '/pages/myOrder/myOrder'
		})
	}
	const toWallet = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/wallet/wallet'
		})
	}
	const toIntegral = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/myIntegral/myIntegral'
		})
	}
	const toCoupon = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/myCoupon/myCoupon'
		})
	}
	const toOut = () => {
		uni.showModal({
			title: '提示',
			content: '您确定要退出吗？',
			confirmText: '退出',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					removeToken()
					uni.removeStorageSync('user_id')
					uni.removeStorageSync('userInfo')
					removeToken()
					user_id.value = ''
					uni.showToast({
						title: '退出成功！',
						icon: 'none'
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
		
		// setTimeout(() => {
		// 	user_id.value = ''
		// }, 1000)
	}
	const getQueryVariable = (variable) => {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	const userInfo = ref({})
	const toLog = () => {
		// return
		let code = getQueryVariable('code')
		if (code) {
			console.log(code);
			oaLogin({code}).then(res=>{
				console.log(res)
				if(res.code == 1){
					console.log('1111111111111111111111')
					setToken(res.data.token)
					uni.setStorageSync('userInfo', res.data)
					uni.setStorageSync('user_id', res.data.id)
					console.log('token==========================================',getToken())
					userInfo.value = res.data
					user_id.value = res.data.id
				}
			}).catch(error=>{
				console.log(error)
			})
		} else {
			let appid = "wx9117da7c5261e857" //项目appid
			// let appid = "wx5588fb80c76d535f" //项目appid
			let mainstate = Math.random()
			// let url = encodeURIComponent('http://m.9tenclub.com/H5/#/pages/mine/mine') //这里的是回调地址要与申请的地址填写一致
			let url = encodeURIComponent('http://hotel.shengxuankj.com/web/pages/profile/profile') //这里的是回调地址要与申请的地址填写一致
			// let url = encodeURIComponent('http://192.168.1.183:5173/web/pages/profile/profile') //这里的是回调地址要与申请的地址填写一致
			console.log('url=====================================',url)
			let scopes = "snsapi_userinfo" //表示授权的作用域，多个可以用逗号隔开，snsapi_base表示静默授权，snsapi_userinfo表示非静默授权
			//state：用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击）可设置为简单的随机数加session进行校验
			let httpsUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=${scopes}&state=${mainstate}&connect_redirect=1#wechat_redirect`
			// window.location.replace(httpsUrl)
			window.location.href = httpsUrl
			// window.location.replace =
		}
	}
	const toTarget = (v) => {
		console.log(v);
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		switch (v) {
			case 0:
				uni.navigateTo({
					url: '/pages/course/course'
				})
				break;
			case 1:
				uni.navigateTo({
					url: '/pages/mineList/mineList'
				})
				break;
			case 2:
				uni.navigateTo({
					url: '/pages/task/task'
				})
				break;
			case 3:
				uni.navigateTo({
					url: '/pages/invite/invite'
				})
				break;
			case 4:
				uni.navigateTo({
					url: '/pages/team/team'
				})
				break;
			case 5:
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
				break;
			default:
				break;
		}
	}
	const toLogin = () => {
		// #ifdef H5
		toLog()
		// #endif
		// #ifdef MP
		uni.navigateTo({
			url: '/pages/login/login'
		})
		// #endif

	}

	const toDetail = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/mineDetail/mineDetail'
		})
	}
	const toInfor = () => {
		uni.navigateTo({
			url: '/pages/infor/infor'
		})
	}
	const toNotes = () => {
		uni.navigateTo({
			url: '/pages/notes/notes'
		})
	}
	const toFabu = () => {
		uni.navigateTo({
			url: '/pages/fabu/fabu'
		})
	}

	const toMessage = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/message/message'
		})
	}

	const toBalance = () => {
		if (!uni.getStorageSync('user_id')) {
			uni.showToast({
				title: "请先登录！",
				icon: 'none'
			})
			setTimeout(() => {
				toLogin()
			}, 1000)
			return
		}
		uni.navigateTo({
			url: '/pages/balance/balance'
		})
	}
	const toSetUp = () => {
		uni.navigateTo({
			url: '/pages/setUp/setUp'
		})
	}
	const toDeposit = () => {
		uni.navigateTo({
			url: '/pages/depositList/index'
		})
	}
</script>

<style scoped>
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.page {
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		background-color: #ffffff;
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.header-right {
		display: flex;
		gap: 30rpx;
	}

	.user-info {
		padding: 32rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		gap: 24rpx;
	}

	.avatar-container {
		position: relative;
		width: 120rpx;
		height: 120rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.vip-badge {
		position: absolute;
		right: -6rpx;
		bottom: -6rpx;
		background-color: #ffffff;
		border-radius: 50%;
		padding: 4rpx;
	}

	.user-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.user-id {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
	}

	.welcome-text {
		font-size: 28rpx;
		color: #666666;
	}

	.verify-tip {
		display: inline-flex;
		align-items: center;
		gap: 8rpx;
		background-color: #fff5f0;
		padding: 8rpx 16rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #ff6b23;
	}

	.stats-bar {
		height: 160rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.stat-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #333333;
	}

	.stat-label {
		font-size: 28rpx;
		color: #999999;
	}

	.member-card {
		margin: 20rpx 32rpx;
		background-color: #1c2438;
		border-radius: 20rpx;
		padding: 32rpx;
	}

	.card-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-left {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.card-title {
		font-size: 40rpx;
		color: #ffffff;
		font-weight: 500;
	}

	.card-desc {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.upgrade-btn {
		width: 120rpx;
		height: 56rpx;
		line-height: 56rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		font-size: 28rpx;
		color: #1c2438;
		padding: 0;
	}

	.privilege-bar {
		margin: 0 32rpx;
		background-color: #fff5f0;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.privilege-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 26rpx;
		color: #ff6b23;
	}

	.function-section {
		background-color: #ffffff;
		padding: 0 32rpx;
		width: 100%;
		margin: 30rpx auto;
	}

	.section-title {
		font-size: 34rpx;
		color: #333333;
		font-weight: 700;
		padding: 32rpx 0;
	}

	.function-list {
		display: flex;
		flex-direction: column;
	}

	.function-item {
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #f5f5f5;
		font-size: 26rpx;
		color: #333333;
	}

	.function-item uni-icons:first-child {
		margin-right: 20rpx;
	}

	.function-item uni-icons:last-child {
		margin-left: auto;
	}

	.tab-bar {
		margin-top: auto;
		height: 140rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		padding-top: 16rpx;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
	}

	.tab-item text {
		font-size: 24rpx;
		color: #999999;
	}

	.tab-item.active text {
		color: #ff6b23;
	}

	.cursor-pointer {
		cursor: pointer;
	}
</style>